<template lang="html">
	 <div class="home-box">
        <div class="text-left">
        <p>
            现在的前端开发已经由原来的webPage模式转换为webApp的模式为主了，现在大部分的前端项目,不在是过去由几个页面和几个jquery插件就能完成的了
        </p>
          <p>现在的工程复杂化了，一复杂就会出现许多问题：</p>
          <ul>
              <ol>1、如何高效的多人写作</ol>
              <ol>2、如何保证项目的可维护性</ol>
              <ol>3、如何提高项目的开发质量</ol>
          </ul>
        </div>
        <br>
        <div class="clear">
            <div class="alert alert-success text-left" role="alert">
                针对这些问题，前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来考虑。
            </div>
            <tabChange :arr="arr_qian" :active="active"></tabChange>

        </div>
        <div class="clear">
            <h3 class="text-left">现在流行的前端框架</h3>
            <p class="text-left">AngularJS、React、Vue都是属于MVX的框架</p>
            <tabChange :arr="mvx" :active="active"></tabChange>
        </div>
        <imgCode></imgCode>
    </div>


</template>
<script>
  import tabChange from '@/page/tab'
  import imgCode from '@/page/ele-code'
	export default{
    components:{
      tabChange,
      imgCode
    },
    data(){
        return {
          arr_qian:[{title:"模块化",str:"它的作用就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载，这一点为多人协作提供了可能"},
              {title:"组件化",str:"程序大型的关键就是组件化，一是能够把程序的逻辑拆分到组件的颗粒以降低复杂度，二是能够通过复用的方式提升系统的开发效率和可维护性。从这些角度看，组件化的目的和面向对象其实是共通的"},
              {title:"规范化",str:"规范化制定开发规范，提高团队协作能力开发规范的目的是统一团队成员的编码规范，便于团队协作和代码维护。开发规范没有统一的标准，每个团队可以建立自己的一套规范体系。"},
              {title:"自动化",str:" webpack、gulp..."}
              ],
          mvx:[
            {title:"MVC",str:"MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的,用户User通过控制器Controller来操作模板Model从而达到视图View的变化。"},
            {title:"MVP",str:"是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。"},
            {title:"MVVM",str:"MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。"}
          ],
          active:0,
          changebig:true
        }
    },
    methods:{

    },
  }
</script>
<style scoped="">
  .home-box{
    padding: 0 100px;
  }
  .clear{
    overflow: hidden;
  }
  img{
    width: 100%;
    height: 100%;
  }
</style>
